1593825 - Implement badged favicons

Status: RESOLVED FIXED

(Firefox :: Address Bar, task, P1)

Description

[Marco Bonardo [:mak]]

Instead of star/tab search icons in front of the results, for the megabar we want to implement badged favicons, according to the spec.

Comment 1

[Harry Twyford]

Marking blocked-ux since we're going to use pre-made badge icons instead of drawing the blue circles in CSS. We need the new icons from UX before proceeding.

Comment 2

[Dão Gottwald [:dao]]

(In reply to Harry Twyford [:harry] from comment #1)

Marking blocked-ux since we're going to use pre-made badge icons instead of drawing the blue circles in CSS.

Why? We can draw perfect circles with CSS, plus we have scalable tab and bookmark icons that we could reuse here unless they don't scale nicely to this small size.

Comment 3

[Mike de Boer [:mikedeboer]]

(In reply to Dão Gottwald [::dao] from comment #2)

Why? We can draw perfect circles with CSS, plus we have scalable tab and bookmark icons that we could reuse here unless they don't scale nicely to this small size.

That's the thought indeed... my experience is - generally - that scaling vector icons up is no trouble at all, but when scaling them down they tend to need different shapes to get the same visual expression. This became clear to me right away when looking at the swith-to-tab icon. They might also be considered to not match the Photon tab style currently (since the icon shows a curvy tab).

Drawing the circle with CSS seems like the right plan, because you can work with different contrast modes easier that way, since we generally work with only one fill-color for icons.

Comment 4

[Harry Twyford]

Why?

I recall a meeting last week where we decided to use pre-made icons instead of CSS circles because we'd need new icons for the small size anyways, and that way we could save the small bit of computation needed to draw the CSS circle every time.

I'm glad we've settled on CSS circles now though, since they're more flexible like Mike said. I've asked Bryan Bell if the current star and tab icons are suitable for display at the small badge size or if we'll need new icons. I'll needinfo him here for posterity.

Comment 5

[Harry Twyford]

Attachment: new_badges.png

Bryan and shorlander have asked that we do the badges like this instead.

Comment 6

[Harry Twyford]

Attachment: dimensions.png

Comment 7

[Harry Twyford]

Attachment: Bug 1593825 - Implement badged favicons. r?dao

Comment 8

[Harry Twyford]

Attachment: dimensions_new.png

Comment 9

[Harry Twyford]

Attachment: dark_mode.png

We'll be using slightly different colours in dark mode:

Light mode

Star: Blue-60
Tab: Teal-70
Outline: #fff

Dark mode

Star: Blue-50
Tab: Teal-60
Outline: Grey-70

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/48203e499be2
Implement badged favicons. r=dao

Comment 11

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/48203e499be2